<template>
  <pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <search
      background="#39a9ed"
      v-model="value"
      @focus="change"
      shape="round"
      placeholder="请输入搜索关键词"
    />
    <div class="banners">
      <i class=""></i>
      <!-- 轮播图 -->
      <swipe :autoplay="3000" lazy-render>
        <swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </swipe-item>
      </swipe>
      <!-- 板块 -->
      <!-- <img src="./image/免费.png" /> -->
      <grid :border="false">
        <grid-item
          icon="https://s2.232232.xyz/static/190/2022/10/18-634e40c9b248e.png"
          text="免费专区"
          :to="{
            name: 'Home-Gratis',
          }"
        />
        <grid-item
          icon="https://s2.232232.xyz/static/190/2022/10/18-634e40c9e094d.png"
          text="限时特价"
          :to="{ name: 'Home-Limited' }"
        />
        <grid-item
          icon="https://s2.232232.xyz/static/190/2022/10/18-634e40c9dce2c.png"
          text="热门课程"
          :to="{ name: 'Home-Hot' }"
        />
        <grid-item
          icon="https://s2.232232.xyz/static/190/2022/10/18-634e40cbadb4b.png"
          text="精品套餐"
          :to="{ name: 'Home-Fine' }"
        />
      </grid>
      <img class="yaoqing" src="./image/图层4.png" alt="" />

      <!-- 动画课程 -->
      <h3 class="title">
        <img class="smallIcon" src="./image/矩形7拷贝5.png" alt="" />
        动画课程
      </h3>
      <grid :border="false">
        <!-- <router-link
          class="weibiao"
          :to="{ name: item.link }"
          v-for="item in course"
        > -->
        <grid-item
          v-for="item in course"
          :icon="item.name"
          :text="item.title"
          :to="{ name: item.link, query: { id: item.id } }"
          class="weibiao"
        />
        <!-- </router-link> -->
      </grid>

      <!-- 同步课程 -->
      <h3 class="title">
        <img class="smallIcon" src="./image/矩形7拷贝5.png" alt="" />
        同步课程
      </h3>
      <div class="SyncCourse">
        <div>
          <p>
            <span @click="current(1)" :class="currentId == 1 ? 'current' : ''"
              >小学</span
            ><span @click="current(2)" :class="currentId == 2 ? 'current' : ''"
              >初中</span
            ><span @click="current(3)" :class="currentId == 3 ? 'current' : ''"
              >高中</span
            >
          </p>
          <nav>
            <ul :class="currentUl">
              <li
                v-for="item in showData._rawValue"
                @click="clickLi(item)"
                :class="currentLi == item.id ? 'currentLi' : ''"
              >
                {{ item.name }}
              </li>
            </ul>
          </nav>
          <h3 @click="goSync">
            赶紧选择教材学习吧
            <img @click="goSync" src="./image/切换.png" alt="" /><span
              @click="goSync"
              >切换课程</span
            >
          </h3>
          <p @click="goSync" class="select-p">
            去选择同步教材
            <img @click="goSync" src="./image/＞.png" alt="" />
          </p>
        </div>
      </div>
      <!-- 学习方法论 -->
      <h3 class="title">
        <img class="smallIcon" src="./image/矩形7拷贝5.png" alt="" />
        学习方法论
      </h3>
      <ul class="LearningMethods">
        <!-- <router-link
          :to="{ name: item.link, query: { tid: item.tid } }"
         
        > -->
        <li
          v-for="item in LearnMethod"
          :class="item.id"
          @click="ToTraining(item.tid, item.pid)"
        >
          <p style="clear: both">
            {{ item.title }}
          </p>
          <img :src="item.path" alt="" />
        </li>
        <!-- </router-link> -->
        <!-- <li>高效学习<img src="./image/学士帽.png" alt="" /></li>
        <li>心理辅导<img src="./image/爱心 (1) 拷贝 2.png" alt="" /></li>
        http://localhost:5173/src/01-Home/image/学士帽.png -->
      </ul>

      <!-- 安全教育 -->
      <h3 class="title">
        <img class="smallIcon" src="./image/矩形7拷贝5.png" alt="" />
        安全教育
      </h3>
      <ul class="SafetyEducation">
        <li>安全教育<img src="./image/爱心(1).png" alt="" /></li>
        <li>心灵成长<img src="./image/爱心(1).png" alt="" /></li>
      </ul>

      <!-- 教育文章 -->
      <h3 class="title">
        <img class="smallIcon" src="./image/矩形7拷贝5.png" alt="" />
        教育文章
        <router-link :to="{ name: 'Home-showMore' }"
          ><span class="more">查看更多 ></span></router-link
        >
      </h3>

      <ul class="EducationalArticles">
        <li
          @click="clickHandleEssay(item)"
          v-for="item in EssayArr"
          :key="item.id"
        >
          <img :src="item.cover" alt="" />
          <h4>{{ item.title }}</h4>
          <p>{{ dalHtml(item.text) }}</p>
          <p class="time">{{ item.updateTime }}</p>
        </li>
      </ul>

      <!-- 免费好课 -->
      <h3 class="title">
        <img class="smallIcon" src="./image/矩形7拷贝5.png" alt="" />
        免费好课
      </h3>
      <div class="over">
        <ul class="goodLessons">
          <li v-for="item in gratis" @click="GoVideos">
            <img :src="item.picture" alt="" />
          </li>
        </ul>
      </div>
      <!--  -->

      <div class="zhanwei"></div>
    </div>
  </pull-refresh>
</template>
<script setup>
import { ref } from "vue";
import {
  Search,
  PullRefresh,
  Toast,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Card,
  Badge,
  Tab,
  Tabs,
} from "vant";

import "font-awesome/css/font-awesome.min.css";
import { useRouter } from "vue-router";
import { getImg, dalImg, dalHtml } from "../utils/tools";
import { loadEssayAPI, loadCourseAPI, loadTreeAPI } from "../API/li";

let router = useRouter();
//下拉刷新
let count = ref(0);
let isLoading = ref(false);
let onRefresh = () => {
  setTimeout(() => {
    // Toast("刷新成功");
    isLoading.value = false;
    count.value++;
    console.log(count.value);
  }, 1000);
};
//轮播图
const images = [
  "https://s2.232232.xyz/static/190/2022/10/18-634e3fbd8f935.png",
  "https://s2.232232.xyz/static/190/2022/10/18-634e40cceb0c8.png",
  "https://s2.232232.xyz/static/190/2022/10/18-634e40cceb067.png",
];
//输入框
const value = ref("");
let { push } = useRouter();
let change = () => {
  push({
    name: "Home-input",
  });
};

//动画课程
let course = ref([
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43ba8af85.png",
    title: "初中数学",
    id: 1,
    link: "Home-MiddleMath",
  },
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43ba9655e.png",
    title: "经典语文",
    id: 2,
    link: "Home-Chinese",
  },
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43ba9b433.png",
    title: "趣味英语",
    id: 3,
    link: "Home-English",
  },
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43ba9b266.png",
    title: "初中物理",
    id: 4,
    link: "Home-Physics",
  },
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43bab2702.png",
    title: "初中化学",
    id: 5,
    link: "Home-Chemistry",
  },
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43bb823bf.png",
    title: "高中数学",
    id: 6,
    link: "Home-HighMath",
  },
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43bb84773.png",
    title: "小学数学",
    id: 7,
    link: "Home-Mathematics",
  },
  {
    name: "https://s2.232232.xyz/static/190/2022/10/18-634e43bb85f8a.png",
    title: "套餐",
    id: 8,
    link: "Home-Package",
  },
]);

//同步课程
let currentId = ref(1);

//课程数据
let small = ref([
  { id: 1, name: "语文" },
  { id: 2, name: "数学" },
  { id: 3, name: "英语" },
  { id: 4, name: "科学" },
  { id: 5, name: "思品" },
]);
let middle = ref([
  { id: 1, name: "数学" },
  { id: 2, name: "物理" },
  { id: 3, name: "生物" },
  { id: 4, name: "化学" },
  { id: 5, name: "语文" },
  { id: 6, name: "地理" },
  { id: 7, name: "思品" },
  { id: 8, name: "历史" },
  { id: 9, name: "初升高" },
]);
let big = ref([
  { id: 1, name: "语文" },
  { id: 2, name: "数学" },
  { id: 3, name: "英语" },
  { id: 4, name: "物理" },
  { id: 5, name: "化学" },
  { id: 6, name: "生物" },
  { id: 7, name: "政治" },
  { id: 8, name: "历史" },
  { id: 9, name: "地理" },
]);
let currentUl = ref("");
//初始化判断currentId是否为第一个
currentId.value == 1 ? (currentUl.value = "currentUl") : (currentUl.value = "");
let showData = ref([]); //展示数据
showData.value = small;

//span点击
let current = (id) => {
  currentId.value = id;
  console.log(currentId);
  currentId.value == 1
    ? (currentUl.value = "currentUl")
    : (currentUl.value = "");
  switch (id) {
    case 1:
      showData.value = small;
      break;
    case 2:
      showData.value = middle;
      goSyncData.value = showData.value._rawValue[0].name;
      break;
    case 3:
      showData.value = big;
      break;
  }
  currentLi.value = 1; //重置li的id
};

let currentLi = ref("");
currentLi.value = 1; //初始化li的id

let goSyncData = ref("语文");
goSyncData.value = showData.value._rawValue[0].name;
//li点击
function clickLi(item) {
  currentLi.value = item.id;
  goSyncData.value = item.name;
}
//跳转到sync
function goSync() {
  push({
    name: "Home-Sync",
    query: { name: JSON.stringify(goSyncData.value) },
  });
}

//学习方法论
let LearnMethod = ref([
  {
    tid: 1,
    title: "考试提升",
    link: "Home-Training",
    path: "https://s2.232232.xyz/static/190/2022/10/18-634e42b8c4217.png",
    id: "Hoist",
    pid: 25,
  },
  {
    tid: 2,
    title: "高效学习",
    link: "Home-Training",
    path: "https://s2.232232.xyz/static/190/2022/10/18-634e42b8c623a.png",
    id: "Learn",
    pid: 6,
  },
  {
    tid: 3,
    title: "心理辅导",
    link: "Home-Training",
    path: "https://s2.232232.xyz/static/190/2022/10/18-634e42b8cbe66.png",
    id: "Training",
    pid: 11,
  },
]);
loadTreeAPI().then((res) => {
  console.log(res.data);
  console.log(LearnMethod._rawValue);
});
let ToTraining = (tid, pid) => {
  push({
    name: "Home-Training",
    query: { id: tid, idTwo: pid },
  });
};
//教育文章
let EssayArr = ref([]);
loadEssayAPI().then((res) => {
  //加载文章
  EssayArr.value = res.data.records;
  // console.log(EssayArr.value);
});
let clickHandleEssay = (item) => {
  router.push({
    name: "Home-essay",
    query: { id: item.id },
  });
};

//免费好课
let gratis = ref([]);
loadCourseAPI().then((res) => {
  gratis.value = res.data;
});
let GoVideos = () => {
  router.push({
    name: "Home-Training",
    query: { id: 1, idTwo: 25 },
  });
};
</script>
<style scoped>
.SyncCourse {
  width: 100%;
  height: 55vw;
  background-color: #e5f1fe;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.SyncCourse div {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.SyncCourse div p {
  background-color: #e5f1fe;
  height: 9vw;
}
.SyncCourse div p span {
  float: left;
  color: #333333;
  width: 25%;

  height: 100%;
  text-align: center;
  /* line-height: ; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  line-height: 9vw;
}
.SyncCourse nav {
  overflow: scroll;
}
.SyncCourse div ul {
  overflow: auto;
  width: 230vw;
  margin-top: 3vw;
}
.SyncCourse div ul li {
  width: 19vw;
  border-radius: 10px;
  height: 5vh;
  background-color: #e5f1fe;
  margin-left: 4.5vw;
  float: left;
  margin-bottom: 3vw;
  text-align: center;
  line-height: 5vh;
  color: #333333;
}
.currentLi {
  background-color: #007af4 !important;
  color: #ffffff !important;
}
.currentUl {
  width: 135vw !important;
}
.current {
  background-color: #ffffff;
}
.SyncCourse div h3,
.SyncCourse div .select-p {
  margin-left: 5vw;
  margin-top: 1vh;
  /* display: flex; */
}
.SyncCourse div h3 span {
  color: #007af4;
  font-size: 0.5rem;
  margin-left: 1vw;
}
.SyncCourse div h3 {
  height: 10vw;
  /* overflow: hidden; */
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.SyncCourse div h3 img {
  width: 4vw;
  height: 4vw;
  margin-left: 5vw;
}
.SyncCourse div .select-p {
  background-color: #ffffff;
}
.SyncCourse div .select-p img {
  width: 3vw;
}
.zhanwei {
  width: 100%;
  height: 15vw;
}
.over {
  overflow: auto;
}
.goodLessons {
  width: 570vw;
}

.goodLessons li {
  overflow: hidden;
  width: 23.3vw;
  height: 17vw;
  background-color: red;
  float: left;
  margin-left: 5vw;
  border-radius: 10px;
  margin-bottom: 2vh;
}
.goodLessons li :nth-child(1) {
  margin-left: 0;
}
.goodLessons li img {
  width: 100%;
  height: 100%;
}
.banners {
  height: 100%;
  width: 100%;
  padding: 3vw;
  box-sizing: border-box;
  background-color: #fafafa;
}
.van-grid-item__content--center {
  background-color: #fafafa;
}
.my-swipe .van-swipe-item {
  border-radius: 8px;
  margin-top: 10px;
}
.van-swipe-item img {
  width: 100% !important;
  height: 100% !important;
}
.van-grid .van-grid-item .van-grid-item__content--center .van-icon {
  width: 5.7333vw !important;
}
.van-swipe {
  height: 44vw;
  border-radius: 8px;
}
.van-search {
  width: 100%;
  height: 10vh;
}
.van-search .van-search__field {
  width: 80% !important;
}
.yaoqing {
  width: 100%;
  margin-top: 7vw;
}
.title {
  margin-top: 8vw;
  line-height: 3vw;
  position: relative;
  text-indent: 5vw;
  margin-bottom: 8vw;
}
.smallIcon {
  height: 5vw;
  widows: 1vw;
  position: absolute;
  left: 2vw;
  top: -1.2vw;
}
.van-grid {
  justify-content: space-around;
}
.weibiao::after {
  content: "";
  display: block;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background-color: rgba(255, 197, 25, 0.632);
  position: relative;
  top: -5.3rem;
  left: 7.6vw;
  z-index: 1;
}
.LearningMethods {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.LearningMethods li {
  height: 27vw;
  width: 27vw;
  background-color: rgb(198, 233, 250);
  border-radius: 10px;
  list-style: none;
  color: rgb(11, 173, 255);
  text-align: center;
  line-height: 15vw;
}
.Learn {
  background-color: rgb(253, 230, 134) !important;
  color: rgb(254, 182, 1) !important;
}
.Training {
  background-color: rgb(250, 212, 212) !important;
  color: rgb(247, 105, 105) !important;
}
.LearningMethods li img {
  width: 9vw;
  float: right;
  margin-right: 2vw;
}
.SafetyEducation {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.SafetyEducation li {
  height: 13vw;
  width: 45%;
  background-color: rgb(253, 230, 134);
  color: rgb(254, 182, 1);
  border-radius: 10px;
  list-style: none;
  text-indent: 1rem;
  line-height: 13vw;
}
.SafetyEducation li:nth-of-type(2) {
  background-color: rgb(250, 212, 212);
  color: rgb(247, 105, 105);
}

.SafetyEducation li img {
  width: 8.5vw;
  float: right;
  margin-right: 2vw;
  margin-top: 2vw;
}
.EducationalArticles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.EducationalArticles li {
  height: 50vw;
  width: 45%;

  border-radius: 10px;
  list-style: none;
  text-indent: 1rem;
  line-height: 13vw;
  background-color: white;
}
.EducationalArticles li img {
  width: 100%;
  height: 40%;
  float: left;
  z-index: -1;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.EducationalArticles li h4 {
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.EducationalArticles li p {
  float: left;
  margin-top: -7vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  font-size: 0.8rem;
  /* margin-left: 5px; */
}
.time {
  font-size: 0.6rem !important;
  margin-top: 0.5vw !important;
}
.EducationalArticles li span {
  float: left;
  font-size: 0.6rem;
  color: gray;
}
.more {
  float: right;
  color: gray;
  font-size: 0.8rem;
  font-weight: 100;
}
</style>
